<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>限制复选框最多选择几项</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h2>限制复选框最多选择几项</h2>
<input type="checkbox" name='forbidcheckSelects'>1<br />
<input type="checkbox" name='forbidcheckSelects'>2<br />
<input type="checkbox" name='forbidcheckSelects'>3<br />
<input type="checkbox" name='forbidcheckSelects'>4<br />
<p>最多选择3项</p>
<script type="text/javascript">
    window.onload = function(){
        var _forbidcheckSelects = document.getElementsByName("forbidcheckSelects"),
        //限制复选框最多选择3项
                banNums = 3;
        for(var i in _forbidcheckSelects){
            _forbidcheckSelects[i].onclick = function(){
                var __forbidcheckSelects = document.getElementsByName("forbidcheckSelects"),
                        selectNum = 0;
                for(var i in __forbidcheckSelects){
                    if(i == "length") break;
                    if(__forbidcheckSelects[i].checked){
                        selectNum++;
                    }
                }
                //如果选中的复选项，超过限制最大数，将当前的选中选项设置为没选中false
                if(selectNum > banNums) {
                    this.checked = false;
                }

            }

        }
    };
</script>
</body>
</html>